<template>
  <el-dialog :title="$t('tool.rightMenu.' + title)" :visible.sync="dialogFormVisible" custom-class="jtyj-dialog"
    :close-on-click-modal="false">
    <el-form ref="form" :model="form" :rules="rules" label-position="top">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item :label="$t('tool.simulationRun.roomName')" prop="roomName">
            <el-input style="width: 200px;" v-model="form.roomName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('tool.simulationRun.engineSelect')" prop="engineSelect">
            <el-select style="width: 200px;" v-model="form.engine" placeholder="请选择">
              <el-option v-for="item in engineOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('tool.simulationRun.selectScenarioOrExperiment')" prop="selectScenarioOrExperiment">
            <el-button class="jtyj-btn-cancel" @click="openSelectScenarioOrExperimentDialog">点击选择</el-button>
            <template v-if="form.source != null">
              <div v-if="form.source == 'selectScenario'">
                <el-tag>想定：{{ form.selectName }}</el-tag>
              </div>
              <div v-if="form.source == 'selectExperiment'">
                <el-tag>试验：{{ form.selectName }}</el-tag>
              </div>
              <div v-if="form.source == 'selectExperimentWithAnalysis'">
                <el-tag>试验(评估分析)：{{ form.selectName }}</el-tag>
              </div>
              <div v-if="form.source == 'loadUpload'">
                <el-tag>本地上传：{{ form.uploadPath }}</el-tag>
              </div>
            </template>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item :label="$t('tool.simulationRun.parallelNum')" prop="parallelNum">
            <el-input-number v-model="form.parallelNum" :min="1" :step="1" step-strictly></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('tool.simulationRun.defaultSpeed')" prop="defaultSpeed">
            <el-input-number v-model="form.defaultSpeed" :min="1" :step="25" step-strictly></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('tool.simulationRun.roomDescribe')" prop="roomDescribe">
            <el-input type="textarea" v-model="form.roomDescribe" autocomplete="off"
              :placeholder="$t('tool.others.placehoderInput')"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item :label="$t('tool.simulationRun.enablePlackback')" prop="enablePlackback">
            <el-radio v-model="form.enablePlackback" label="1">启用</el-radio>
            <el-radio v-model="form.enablePlackback" label="2">停用</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('tool.simulationRun.deleteRoomAfterEnd')" prop="deleteRoomAfterEnd">
            <el-radio v-model="form.deleteRoomAfterEnd" label="1">停留</el-radio>
            <el-radio v-model="form.deleteRoomAfterEnd" label="2">删除</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item :label="$t('tool.simulationRun.schedulingPolicy')" prop="schedulingPolicy">
            <el-table :data="form.schedulingPolicy" :max-height="250" style="width: 100%;">
              <el-table-column prop="simNode" label="仿真节点" width="100">
                <template slot-scope="scope">
                  <el-tag>{{ scope.row.simNode }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="assignServer" label="分配至服务器" width="200">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.assignServer" placeholder="请选择">
                    <el-option class="custom-option" v-for="item in serverOptions" :key="item.value" :label="item.label"
                      :value="item.value">
                      <!-- 自定义选项内容 -->
                      <div class="option-content">
                        <div class="option-content__label">{{ item.label }}</div>
                        <div class="option-content__percentage">
                          <div style="position: relative;">
                            <el-progress :width="45" :stroke-width="3" type="circle" :show-text="false"
                              :percentage="item.memoryUse"></el-progress>
                            <div class="circle-center">
                              <div class="circle-center__item">{{ item.memoryUse }}%</div>
                              <div class="circle-center__item">内存</div>
                            </div>
                          </div>
                          <div style="position: relative;">
                            <el-progress :width="45" :stroke-width="3" type="circle" :show-text="false"
                              :percentage="item.cpuUse"></el-progress>
                            <div class="circle-center">
                              <div class="circle-center__item">{{ item.cpuUse }}%</div>
                              <div class="circle-center__item">CPU</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="cpuLimit" label="CPU资源限制(m)">
                <template slot-scope="scope">
                  <el-slider v-model="scope.row.cpuLimit" show-input :min="100" :max="30000"></el-slider>
                </template>
              </el-table-column>
              <el-table-column prop="memoryLimit" label="内存资源限制(Mi)">
                <template slot-scope="scope">
                  <el-slider v-model="scope.row.memoryLimit" show-input :min="100" :max="65536"></el-slider>
                </template>
              </el-table-column>

            </el-table>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button class="jtyj-btn-cancel" @click="cancel">{{
        $t("setup.buttonText.cancel")
      }}</el-button>
      <el-button class="jtyj-btn-primary" @click="submitForm">{{
        $t("setup.buttonText.save")
      }}</el-button>
    </div>

    <SelectScenarioOrExperimentDialog ref="selectScenarioOrExperimentDialog"  @change="handelScenarioOrExperimentChange"></SelectScenarioOrExperimentDialog>
  </el-dialog>
</template>

<script>
import {
  addModel,
  addGlobalData,
  updateModel,
  updateGlobalData,
  addModelFolder,
  updateModelFolder,
  addModelData,
  updateModelData,
} from "@/api/myspace/model-manage-tool/model-manage";
import { mapState } from "vuex";
import SelectScenarioOrExperimentDialog from "./select-scenario-experiment-dialog.vue";
export default {
  data() {
    return {
      title: "addRoom",
      dialogFormVisible: false,
      form: {
        userId: null,
        roomName: "胖东来的房间",
        source:null,
        selectId: null,
        selectName: null,
        uploadPath: null,
        engine: "v5.0",
        parallelNum: 1,
        deleteRoomAfterEnd: "1",
        schedulingPolicy: [{
          simNode: "platform",
          assignServer: "master",
          cpuLimit: 100,
          memoryLimit: 100,
        }, {
          simNode: "node-1",
          assignServer: "node1",
          cpuLimit: 100,
          memoryLimit: 100,
        }
        ],
        enablePlackback: "1",
        defaultSpeed: 25,
        roomDescribe: 1,
        parentId: 0,
        nodeType: 1,
      },
      serverOptions: [{
        value: '自动分配',
        label: '自动分配',
        cpuUse: 0,
        memoryUse: 0
      }, {
        value: 'node1',
        label: 'node1',
        cpuUse: 50,
        memoryUse: 50
      }, {
        value: 'node2',
        label: 'node2',
        cpuUse: 70,
        memoryUse: 40
      }],
      engineOptions: [{
        value: 'v5.0',
        label: 'v5.0'
      }, {
        value: 'v4.0',
        label: 'v4.0'
      }, {
        value: 'standalone',
        label: 'standalone'
      }],
      treeData: [],
      rules: {
        experimentName: [{ required: true, message: "请输入名称", trigger: "blur" }],
        experimentDifficulty: [{ required: true, message: "请选择难度", trigger: "blur" }],
        experimentDescribe: [{ required: true, message: "请输入描述", trigger: "blur" }],
      },
    };
  },
  components:{
    SelectScenarioOrExperimentDialog
  },
  computed: {
    ...mapState({
      userId: (state) => state.user.id,
    }),
  },
  mounted() {
  },
  methods: {
    init(sign, node) {
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs['form'].resetFields();
        if (sign == "add") {
          this.title = "addRoom";
          this.form.parentId = node ? node.id : 0
        } else {
          this.title = "edit";
          this.form.parentId = node.parentId;
          this.form.roomName = node.name;
          this.form.experiment = node.data.experiment;
          this.form.engine = node.data.engine;
          this.form.parallelNum = node.data.parallelNum;
          this.form.deleteRoomAfterEnd = node.data.deleteRoomAfterEnd;
          this.form.schedulingPolicy = node.data.schedulingPolicy;
          this.form.enablePlackback = node.data.enablePlackback;
          this.form.defaultSpeed = node.data.defaultSpeed;
          this.form.roomDescribe = node.roomDescribe;
        }
      });
    },

    cancel() {
      this.dialogFormVisible = false;
    },

    // 打开选择想定或试验的弹窗
    openSelectScenarioOrExperimentDialog(){
      this.$refs.selectScenarioOrExperimentDialog.dialogVisible = true
    },

    // 选择完成之后的回调
    handelScenarioOrExperimentChange(source, selectId, selectName, uploadPath){
      console.log('选择完成', source, selectId, selectName, uploadPath);
      this.form.source = source;
      this.form.selectId = selectId;
      this.form.selectName = selectName;
      this.form.uploadPath = uploadPath;
    },
    // 表单提交
    submitForm() {
      this.form.userId = this.userId;
      this.$refs["form"].validate((valid) => {
        console.log('valid', valid);

        if (valid) {
          if (this.form.modelId == null) {
            addModel(this.form).then((response) => {
              if (response.code == 200) {
                this.$message.success(
                  this.$toolHandle.getI18nName(
                    this.$zh.setup.responseText,
                    this.$en.setup.responseText,
                    this.$i18n.locale,
                    "success"
                  )
                );
                this.$emit("refresh");
                this.dialogFormVisible = false;
              }
            });
          } else {
            updateModel(this.form).then((response) => {
              if (response.code == 200) {
                this.$message.success(
                  this.$toolHandle.getI18nName(
                    this.$zh.setup.responseText,
                    this.$en.setup.responseText,
                    this.$i18n.locale,
                    "success"
                  )
                );
                this.$emit("refresh");
                this.dialogFormVisible = false;
              }
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.jtyj-input {
  width: 100%;
}

.upload-demo {
  ::v-deep .el-upload {
    justify-content: flex-start !important
  }
}

/* 关键样式修复 */
.custom-option {
  height: auto !important;
  /* 取消固定高度 */
  padding: 0 !important;
  /* 清除内边距 */
  line-height: normal !important;
  /* 重置行高 */
}

.option-content {
  line-height: 1.5;
  border: 1px solid var(--ui-border-color-base);

  .option-content__label {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
    background-color: var(--ui-item-hover-bg);
  }

  .option-content__percentage {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px 0px 20px;


    .circle-center {
      position: absolute;
      top: 45%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);

      .circle-center__item {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: var(--ui-font-size-lt);
      }
    }
  }
}
</style>